<template>
  <el-card>
    <div slot="header">
      <h3>品类管理-查看历史</h3>
    </div>
    <div v-loading="pageLoading">
      <template v-if="hasHistoryDetails">
        <div
          v-for="item in detailsList"
          :key="item.recordNo"
          class="card-wrap"
        >
          <ViewHistoryCard :card-details="item" />
        </div>
      </template>
      <template v-else>
        <el-empty description="暂无结果" />
      </template>
    </div>
  </el-card>
</template>
<script>
import ViewHistoryCard from './components/ViewHistoryCard';
import { getHistoryService } from '@/api/basics/categoryManage/categoryManage';
export default {
  components: {
    ViewHistoryCard
  },
  data () {
    return {
      pageLoading: false,
      detailsList: []
    }
  },
  created () {
    this.setHistoryDetails()
  },
  computed: {
    hasHistoryDetails () {
      const hasFlag = this.detailsList.length > 0
      return hasFlag
    }
  },
  methods: {
    async setHistoryDetails () {
      const data = { categoryUuid: this.$route?.query?.uuid }
      const loadingFn = state => { this.pageLoading = state }
      const res = await getHistoryService(data, loadingFn)
      this.detailsList = res?.retData ?? []
    }
  }
}
</script>
<style lang="less" scoped>
.card-wrap {
  &:not(:first-child) {
    margin-top: 10px;
  }
}
</style>
